<template>
  <div class="warp-form">
    <div class="warp-back">
      <div class="form-left"></div>
      <div class="form-reight">
        <h1>登录</h1>
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
                'userName',
                {
                  rules: [{ required: true, message: '请输入账号!' }],
                },
              ]"
              placeholder="请输入您的账号"
              style="width: 300px"
              v-model="a"
            >
              <!-- { validator: this.validateUsername, } -->
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '请输入密码！' }],
                },
              ]"
              type="password"
              placeholder="请输入您的密码"
              style="width: 300px"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox
              v-decorator="[
                'remember',
                {
                  valuePropName: 'checked',
                  initialValue: true,
                },
              ]"
            >
              记住密码
            </a-checkbox>
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
              style="width: 300px"
              @click="go()"
            >
              登录
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="goSign()">
              注册
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "admin",
      flag: false,
      a: "",
    };
  },
  // validateUsername(rule,value,callback){
  //   var params = {
  //     id:this.model.id,
  //     username:value
  //   }
  //   checkUsername(params).then((res)=>{
  //     if(res.success){
  //       callback();
  //     }else{
  //       callback('用户已存在！')
  //     }
  //   })
  // },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    go() {
      // console.log(object)
      if (this.a !== "") {
        this.$router.push("/home/serve");
      }
      // console.log(value);
      // this.form.setFieldsValue({
      //   if(this.a!==''){
      // this.$router.push('/home/serve')
      // }
      // a:a !==''? this.$router.push ('/home/serve') :''
      // });
    },
    goSign(){
      this.$router.push("/Sign")
    }
  },
  // mat(){
  //   this.flag ? go() : console.log('不通过')
  // }
};
</script>

<style lang="scss" scoped>
.warp-form {
  .form-left {
    height: 450px;
    width: 200px;
    float: left;
  }
  .form-reight {
    height: 450px;
    width: 350px;
    float: right;
  }
  h1 {
    text-align: center;
    margin-top: 40px;
  }
  height: 100%;
  background: url("../assets/img/1.jpg") no-repeat;
  background-size: 1700px;
  margin-top: 50px;
  .warp-back {
    width: 902px;
    height: 450px;
    margin: 0 auto;
    background: url("../assets/img/管理员登录_03.jpg") no-repeat;
    position: relative;
    top: 50px;
  }
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>